<template>
    <div class="loose">
        <div class="chart" id="chart_right3"></div>
    </div>
</template>

<script>
export default {
    name: 'looseComponent',
    data() {
        return {}
    },
    mounted() {
        this.getEchart();
    },
    methods: {
        getEchart(){
            const chartDom = document.getElementById('chart_right3');
            const myChart = this.$echarts.init(chartDom); 
            let option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    top: '3%',
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    right: '10%',
                    top: '3%',
                    data: ['散板', '可合板']
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        textStyle: {
                            color: '#b3ccf8',
                            fontSize: 13
                        },
                    },
                    data: ['销售仓', '半成品仓', '实验仓', 'RMA']
                },
                yAxis: {
                    type:'value',
                    axisLabel: {
                        textStyle: {
                            color: '#b3ccf8',
                            fontSize: 13
                        },
                    }
                },
                emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                },
                series: [
                    {
                        name: '散板数',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [313, 138, 427, 2304]
                    },
                    {
                        name: '可合板数',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [254, 113, 335, 2241]
                    },
                ]
            }
            option && myChart.setOption(option);
            window.addEventListener('resize', () => {
                 myChart.resize()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .loose {
        .chart {
            height: 4rem;
            width: 100%;
        }
    }
</style>